<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table,td{
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
   <!--
      http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
   -->
   <button id="btn">访问淘宝数据</button>
   <table>

   </table>
<script type="text/javascript">
    //添加点击事件，在点击事件中进行跨域的请求
    document.getElementById("btn").onclick=function () {
      //因为XMLHTPRequest只能支持同源，所以在这里用script的src进行跨域
        //1、第一步：先创建script标签
        var sp=document.createElement("script");
        //2、设置src属性，进行跨域请求，src链接的就是访问服务器的地址
        sp.src="http://suggest.taobao.com/sug?code=utf-8&q=女装&callback=cb";
//        alert("111");
        //3、添加script到body
        //appendChild()给某个父元素添加子节点
        document.body.appendChild(sp);
    };
     function cb(data) {
//        console.log(data);
        //动态的创建dom元素
        var arrs=data.result;
//        console.log(arrs);
        for(var x in arrs){
            //遍历数组，数据中有多少个，那么我就动态的创建多少个tr
            var trEle=document.createElement("tr");
            var trdatas=arrs[x];
            for(var y in trdatas){
                var tdEle=document.createElement("td");
                 tdEle.innerHTML=trdatas[y];
                 trEle.appendChild(tdEle);
            }
            document.getElementsByTagName("table")[0].appendChild(trEle);
        }
     }
</script>
</body>
</html>